<template>
    <div class="login-page">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span class="login-title">房源管理系统</span>
            </div>
            <div class="login-form">
                <el-form :model="form"  ref="loginForm">
                    <el-form-item prop="userName">
                        <el-input type="text" v-model="form.idUser" auto-complete="off" placeholder="Plz Enter Username">
                            <template slot="prepend"><i style="font-size:20px" class="el-icon-user"></i></template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="passWord">
                        <el-input type="text" v-model="form.passwordUser" auto-complete="off" placeholder="Plz Enter password">
                            <template slot="prepend"><i style="font-size:20px" class="el-icon-key"></i></template>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button style="width:100%;" type="primary" @click="login" :loading="loading">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>

</template>

<script>
import {userLogin2} from '../../api/user'
import store from '../../store'

export default {
  name: 'login',
  data () {
    return {
      loading: false,
      form: {
        idUser: '',
        passwordUser: ''
      }
    }
  },
  methods: {
    login () {
      userLogin2(this.form).then(res => {
        if (res.data !== null) {
          this.$message({
            message: '登录成功',
            type: 'success'
          })
          this.$router.push({path: '/houseStatistic'})
        } else {
          this.$message({
            message: '用户名或密码错误',
            type: 'warning'
          })
        }
      })
    }
  },
  created () {
    store.dispatch('user/clearUserInfo')
  }

}
</script>

<style scoped>
.login-page{
    background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-title{
    font-size: 20px;
}

.box-card {
    width: 375px;
}

</style>
